<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            cursor: pointer;
        }
        .complete{
            color: red;
            text-decoration: line-through;
        }
        .btn{
            color: red;
        }
    </style>
</head>
<body>
    <!-- todulist备课版 -->
    <!-- 首先有个input框,要双向绑定一个值 -->
    <!-- 其次我们要给一个点击事件 用于添加数据 -->
    <!-- 定义一个数组来用于循环 -->
    <!-- 数组需要是复杂数据类型 要有值 还有有它当前的状态 并且状态默认为未完成 -->
    <!-- 再使用ul>li把需要for循环的数组渲染出来 -->
    <!-- 下面的按钮有3个，我们推荐也用数组的形式去循环出来 -->
    <!-- 同样，我们的button按钮也有是否选中的状态 所以，这个数组依然声明成复杂数据类型 默认为未选中 -->
    <!-- 然后我们把数组循环出来看看 -->
    <!-- 我们接下来要做的是添加数据进数组 -->
    <!-- 如果input框为空，肯定不能让它去添加元素 需要做个限制 -->
    <!-- 接下来要做的是点击数据的时候切换它的状态 -->
    <!-- 判断该数据的status是否为true来决定是否显示选中样式 -->
    <!-- 写我们按钮的样式了 -->
    <!-- 判断按钮的样式是否为true 来决定是否显示这个样式 -->
    <!-- 给type三个值 -->
    <div id="app">
        <h1>todulist_vue版本</h1>
        <div>
            <input type="text" v-model="inputData">
            <button @click="add">添加</button>
            <ul>
                <li 
                    v-for="(item,index) in list" :key="index" 
                    :class="item.status?'complete':''"
                    @click="chengeStatus(index)"
                    v-show="type === 'all'? true : type === 'complete' ? item.status : !item.status"
                    >
                    {{ item.name }}
                </li>
            </ul>
            <div>
                <button 
                    v-for="(item,index) in btnList" 
                    :key="index" 
                    :class="item.btnStatu?'btn':''"
                    @click="changebtn(index)"
                    >{{item.btnName}}</button>
            </div>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data(){
                return {
                    inputData:'',
                    list:[
                        {
                            name:'吃饭',
                            status:true
                        },
                        {
                            name:'睡觉',
                            status:false
                        },
                        {
                            name:'打发发',
                            status:false
                        }
                    ],
                    btnList:[
                        {
                            btnName:'全部',
                            btnStatu:true
                        },
                        {
                            btnName:'已完成',
                            btnStatu:false
                        },
                        {
                            btnName:'未完成',
                            btnStatu:false
                        },
                    ],
                    type:'all' //all-点击全部都时候 complete-已完成的 nocomplete-未完成的
                }
            },
            methods:{
                add(){
                    if(this.inputData.length > 0){
                        this.list.push({
                            name:this.inputData,
                            status:false
                        })
                    }else{
                        console.log('push值为空')
                    }
                },
                chengeStatus(i){
                    this.list[i].status = !this.list[i].status
                },
                changebtn(i){
                    // map 循环数组，每一个item的值都重置为false
                    this.btnList.map(item => item.btnStatu = false)
                    if( i=== 0 ){
                        this.type = 'all'
                    }else if( i == 1){
                        this.type = 'complete'
                    }else{
                        this.type = 'nocomplete'
                    }
                    this.btnList[i].btnStatu = true
                    // this.btnList[i].btnName
                }
            }
        })
    </script>
</body>
</html>